<template>
	<div>
		<el-row :span="24" style="margin:26px 0 0;">
			<div style="display: flex;justify-content: flex-start;">
				<p @click="navToOperationHome()" class="tabHeader" >首页</p>
				<p @click="goMerchantOperation()" class="tabHeader">商家</p>
				<p @click="navToPersonal()" class="tabHeader">个人中心</p>
				<p @click="navToCkBanner()" class="tabHeader">创客</p>
				<p @click="navToStartBanner()" class="tabHeader">启动广告</p>
				<p  class="tabHeader" style="color: #409eff;border-bottom: 0;">城主页面</p>
			</div>
			<el-row style="margin-top: 20px;">
				<el-button @click="edit('addCZ')" class="btnPad " type="primary">新增</el-button>
				<el-button @click="getBannerList()" :class="[isActive==true?'btnChoose':'btnPad'] " plain>banner</el-button>
		<!-- 		<el-button @click="getOperationList()" :class="[isActive2==true?'btnChoose':'btnPad'] " plain>运营位</el-button>
				<el-button @click="getImportantList()" :class="[isActive1==true?'btnChoose':'btnPad'] " plain>主功能区</el-button>
		
				<el-button @click="getInviteProductList()" :class="[isActive3==true?'btnChoose':'btnPad'] " plain>商品推荐</el-button> -->
			</el-row>
		</el-row>
		<div v-if="isActive==true" style="margin-top: 20px;">
			<el-table :data="pageInfo.vos" v-loading="table_loading" element-table_loading-text="加载中" stripe style="width: 100%">
				<el-table-column min-width="100" label="图片展示">
					<template scope="scope">
						<img style="width: 80px;margin: 5px;" class="banner" :src="scope.row.bannerIcon">
					</template>
				</el-table-column>
				<el-table-column width="250" prop="bannerName" label="名称">
				</el-table-column>
				<el-table-column label="跳转链接">
					<template scope="scope">
						<span>{{scope.row.bannerContent }}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="250">
					<template scope="scope">
						<el-button size="small" type="primary" @click="edit(scope.row.bannerCode)">编辑
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="paginate">
			    <el-pagination
			            @current-change="handleCurrentChange"
			            :current-page="pageInfo.pageNum"
			            :page-size="pageInfo.pageSize"
			            layout="total, prev, pager, next, jumper"
			            :total="pageInfo.count"
			            >
			    </el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
	    data() {
	        return {
	            isActive:true,
				pageInfo: {
					pageNum: 1,
					pageSize: 10,
					count: 1,
					vos: []
				},
				table_loading: false,
				desc: 'DESC',
				sorts: 'BANNER_SORT + 0',
	        }
	    },
	    created(){
	       
	    },
	    activated() {
	       this.getBannerList(this.pageInfo.pageNum)
	    },
	    methods: {
	      navToOperationHome() {
	      	/**
	      	 * 方法说明
	      	 * author: liuchen
	      	 * description:前往运营活动首页 
	      	 * @param 
	      	 * @return 
	      	 * @createTime: 2020-9-17 18:43:39
	      	 */
	      	this.$router.push('/official/activityOperate')
	      },
		  navToPersonal() {
		  	/**
		  	 * 方法说明
		  	 * author: liuchen
		  	 * description: 
		  	 * @param 前往个人中心
		  	 * @return 
		  	 * @createTime: 2020-8-6 18:42:09
		  	 */
		  	this.$router.push('/official/personal_center')
		  },
		  navToCkBanner() {
		  	/**
		  	 * 方法说明
		  	 * author: liuchen
		  	 * description: 
		  	 * @param 前往创客
		  	 * @return 
		  	 * @createTime: 2020-8-7 14:43:16
		  	 */
		  	this.$router.push('/official/ck_bannerList')
		  },
		  navToStartBanner() {
		  	/**
		  	 * 方法说明
		  	 * author: liuchen
		  	 * description: 
		  	 * @param 前往开机广告
		  	 * @return 
		  	 * @createTime: 2020-8-6 18:42:09
		  	 */
		  	this.$router.push('/official/start_bannerList')
		  },
		  goMerchantOperation() {
		  	/**
		  	 * 方法说明
		  	 * author: liuchen
		  	 * description: 
		  	 * @param NavTo商家页
		  	 * @return 
		  	 * @createTime: 2020-8-6 15:17:58
		  	 */
		  	this.$router.push('/official/merchantOperation')
		  },
		  edit(id) {
			  /**
			   * 方法说明
			   * author: liuchen
			   * description: 城主页面编辑 
			   * @param 
			   * @return 
			   * @createTime: 2020-9-18 09:14:50
			   */
			  this.$router.push('/official/city_edit/' + id)
			  // this.$router.push({
			  // 	path: "/official/city_edit/",
			  // 	query: {
			  // 		data: data
			  // 	}
			  // })
		  },
		  handleCurrentChange(val) {
			  this.getBannerList(val)
		  },
		  getBannerList(page = 1) {
		  	let vm = this
		  	vm.table_loading = true;
		  	vm.pageInfo.pageNum = page
		  	vm.dataApi.ajax('bannerPage', {
		  		pageNum: vm.pageInfo.pageNum,
		  		pageSize: 10,
		  		sort: vm.sorts,
		  		desc: vm.desc,
		  		bannerPosition: 'CZ'
		  	}, res => {
		  		// console.log(res, '首页banner列表')
		  		this.table_loading = false;
		  		if (res.responseType === 'S') {
		  			this.pageInfo = res
		  		}
		  	});
		  
		  },
	    }
	}
</script>

<style>
	.tabHeader {
		width: 100px;
		text-align: center;
		display: inline-block;
		padding: 5px 10px;
		margin: 0;
		border: 1px solid #909399;
		border-right: 0;
		cursor: pointer;
	}
	
	.tabHeader:last-child {
		width: 100px;
		text-align: center;
		display: inline-block;
		padding: 5px 10px;
		margin: 0;
		border: 1px solid #909399;
	}
	
	.el-radio-button__orig-radio:checked+.el-radio-button__inner {
		border-bottom-color: #FFFFFF;
		background-color: #FFFFFF;
		color: #20a0ff;
	}
	.btnPad {
		width: 120px;
		text-align: center;
	}
	
	.btnChoose {
		width: 120px;
		text-align: center;
		border: 1px solid #20a0ff;
		color: #20a0ff;
	}
</style>
